<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Try 1</title>
    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<style>
body{
    margin:0px;
}
#home{
    background:url('images/home.jpg') 50% 0 repeat fixed;
    min-height:1000px;
    height:1000px;
    margin:0 auto;
    max-width:1920px;
    position:relative;
    color:#fff;
}

#about{
    background:url('images/about.jpg') 50% 0 repeat fixed;
    min-height:1000px;
    height:1000px;
    margin:0 auto;
    max-width:1920px;
    position:relative;
    -webkit-box-shadow:0 0 50px rgba(0,0,0,0.8);
    box-shadow:0 0 50px rgba(0,0,0,0.8);
}
#home article, #about article{
    height:458px;
    position:absolute;
    text-align:center;
    top:150px;
    width:100%
}
</style>
</head>
<body>
    <section id="home" data-type="background" data-speed="10">
        <article>This is absolutely positioned Content</article>
    </section>
    <section id="about" data-type="background" data-speed="10">
        <article>Parallax Scroll</article>
    </section>
    
<script>
    $(document).ready(function(e){
        $('section[data-type="background"]').each(function(){
            var $bgobj = $(this);
            
            $(window).scroll(function(){
                var yPos = -($(window).scrollTop() / $bgobj.data('speed'));
                
                //put together final bg pos
                var coords = '50%' + yPos + 'px';
                
                //move bg
                $bgobj.css({backgroundPosition: coords});
            })
        
        })
    })
</script>
</body>
</html>